<script lang="ts" setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { defineMessage } from '@/locales'

import enUS from './locales/en-US.json' with { type: 'json' }
import zhCN from './locales/zh-CN.json' with { type: 'json' }

const { t } = useI18n<[typeof import('./locales/zh-CN.json')], Locales>({
  useScope: 'local',
  messages: defineMessage(enUS, zhCN)
})

const props = defineProps<{
  icon: string
  title: string
  status: 'empty' | 'running' | 'resolved'
}>()

const statusState = computed(() => {
  switch (props.status) {
    case 'empty':
      return {
        icon: 'i-fluent-gift-open-24-filled',
        content: t('empty')
      }
    case 'running':
      return {
        icon: 'i-svg-spinners-pulse-2 text-arco-green-6',
        content: t('running')
      }
    default:
      return {
        icon: 'i-fluent-checkmark-starburst-24-filled text-arco-green-6',
        content: t('resolved')
      }
  }
})
</script>

<template>
  <h3 class="my-0 select-none text-arco-2 flex justify-between">
    <span class="inline-flex items-center">
      <i class="text-lg mr-1" :class="icon" />
      {{ title }}
    </span>

    <a-popover position="left" :content="statusState.content" content-class="pt-0! pb-1! px-2!">
      <i class="text-lg" :class="statusState.icon" />
    </a-popover>
  </h3>
</template>
